import React from 'react';
import {connect} from 'dva/index';
import { Button, Col, Form, Input, message, Modal, Popconfirm, Radio, Row, Select, Table, Tabs } from 'antd';
import RightBox from '../../common/rightBox';
import RightConstants from '../../../utils/RightConstants';


const dateFormat = 'YYYY-MM-DD';
const FormItem = Form.Item;
const R = require("ramda");
const TabPane = Tabs.TabPane;


const addChargeTemplate = Form.create()(class AddChargeTemplate extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false,
            id:null
        }
    }

    handleOpen = (id,feeType,addStatus,template,disabled) => {
        this.setState({ open: true,id, feeType,addStatus,template,disabled });

    }

    handleCancel = () => {
        this.setState({ open: false });
        this.props.form.resetFields();
    }




    handleConfirm = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            let data = R.omit(['quotePrice', 'quotePriceCny'])(values);
            data.orderId = this.props.orderId;
            data.type = this.state.feeType;
            values.type = this.state.feeType;
            if (!R.equals(R.pick(Object.keys(values), this.props.chargeTemplate.dataSource), values)) {
                    this.props.dispatch({
                        type: 'orderCharge/batchCreate',
                        payload:{
                            templateId:values.feeItemName,
                            orderId:data.orderId,
                            onSuccess: () => {
                                this.handleCancel();
                                if (this.props.refreshList) this.props.refreshList();
                                if (this.props.fetchDetail) this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                                if (this.props.onCalculation) this.props.onCalculation(undefined ,this.state.feeType, values, undefined);
                                if (this.props.fetchPaymentDetail) this.props.fetchPaymentDetail(this.props.paymentId);
                            }
                        }
                    })
            } else this.handleCancel();
        });
    }

    render() {
        let dataSource = this.props.chargeTemplate.dataSource ? this.props.chargeTemplate.dataSource : {};
        let formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
        let feeItem = this.props.feeItem ? this.props.feeItem : [];
        let feeChargeTemplateList = this.props.chargeTemplate.list ? this.props.chargeTemplate.list : {};
        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this,)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        return (
            <Modal maskClosable={false} visible={this.state.open} title={"费用模板详情"} width={600} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <Row>
                            <FormItem {...formItemLayout} label="模板名称" hasFeedback>
                                {getFieldDecorator('feeItemName', {
                                    rules: [{
                                        required: true, message: '请选择模板'
                                    }],
                                    initialValue: (R.isNil(dataSource.feeItemName) || R.isEmpty(dataSource.feeItemName)) ? undefined : feeChargeTemplateList.feeItemName + ""
                                })(
                                    <Select style={{ width: '100%' }} disabled={this.state.disabled} showSearch placeholder="可通过输入关键字搜索"
                                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                        {
                                            !R.isNil(feeChargeTemplateList) ? feeChargeTemplateList.map(item => {
                                                return (<Select.Option value={item.id + ""} key={item.id + ""}>{item.name +"["+  (item.type ==1 ? "应收" :"应付")    +"]" }</Select.Option>);
                                            }) : ''
                                        }
                                    </Select>
                                )}
                            </FormItem>
                    </Row>
                </Form >
            </Modal >
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.chargeTemplate, chargeTemplate: state.chargeTemplate, supplier: state.supplier,feeItem: state.feeItem,
    };
}

export default connect(mapStateToProps)(addChargeTemplate);